<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
	<title>Demonstration page of taming select</title>
	<style type="text/css">
		body{
			margin:0;
			padding:1em;	
			font-family:arial,sans-serif;
		}
		.trigger{
			border:1px solid #ccc;
			color:green;
			width:15em;
			padding-right:1em;
			background:url(arrow.gif) top right no-repeat #fff;
			display:block;
		}
		.activetrigger{
			border:1px solid #ccc;
			color:green;
			width:15em;
			padding-right:1em;
			display:block;
			background:#ccc;
		}
		/* style of the UL */
		.dropcontainer ul{
			background:#fff;
			border:1px solid #999;
			border-bottom:none;
			list-style-type:none;
			padding:0;
			margin:0;
			width:16em;
			position:absolute;
		}
		.dropdownhidden{
			top:0;
			left:-999em;
		}
		.dropdownvisible{
			top:0;
			left:0;
		}
		.dropcontainer ul a{
			padding:0 .5em;
			display:block;
			width:15em;
			text-decoration:none;
			color:#666;
			border-bottom:1px solid #999;
		}
		.dropcontainer ul a:hover{
			background:#ccc;
		}
		.dropcontainer{
			position:relative;
		}
    </style>
	<script type="text/javascript" src="dropdownSelect.js"></script>
</head>
<body>
<h1>Enhancing the select element</h1>

<h2>Example 1: Creating styleable selects</h2>
<form action="">
	<p>
		<label for="test">Select connection</label>
		<select class="turnintodropdown" name="test" id="test">
			<option value="56">56K dial-up</option>
			<option value="isdn">ISDN dial-up</option>
			<option value="DSL">DSL</option>
			<option value="cable">Cable Modem</option>
			<option value="T1">T1</option>
		</select>
	</p>
	<p>
		<label for="media">Media</label>
		<select class="turnintodropdown" name="media" id="media">
			<option value="cd">CD</option>
			<option value="vinyl">vinyl</option>
			<option value="dvd">DVD</option>
			<option value="vcd">Video CD</option>
		</select>
	</p>
	<p><input type="submit" value="send" /></p>
</form>
<h2>Example 2: Using select for navigation</h2>
<ul class="turnintoselect">
	<li><a href="one.html">one</a></li>
	<li><a href="two.html">two</a></li>
	<li><a href="three.html">three</a></li>
	<li><a href="four.html">four</a></li>
	<li><a href="five.html">five</a></li>
	<li><a href="six.html">six</a></li>
	<li><a href="seven.html">seven</a></li>
</ul>

</body>
</html>
